<template>
	<view class="tech-container">
		<!-- 背景动态粒子效果 -->
		<view class="bg-particles"></view>

		<!-- 顶部工具栏 -->
		<view class="tech-toolbar">
			<view class="toolbar-left">
				<text class="page-title">👥 用户管理</text>
			</view>

			<view class="toolbar-right">
				<el-input
					placeholder="🔍 搜索用户昵称"
					v-model="params.searchText"
					@change="search()"
					class="tech-input"
					size="small"
					prefix-icon="el-icon-search"
					clearable />
			</view>
		</view>

		<!-- 数据表格区域 -->
		<view class="tech-table-container">
			<el-table
				:data="dataList"
				class="tech-table"
				size="small"
				style="width: 100%"
				height="calc(100% - 80px)"
				:header-cell-style="{background: 'rgba(0, 212, 255, 0.1)', color: '#00d4ff', fontWeight: 'bold', borderColor: 'rgba(0, 212, 255, 0.2)'}">

				<el-table-column type="index" width="60" label="#" align="center">
				</el-table-column>

				<el-table-column prop="objectId" label="🆔 用户ID" width="220" show-overflow-tooltip>
				</el-table-column>

				<el-table-column prop="avatarUrl" label="🖼️ 头像" width="100" align="center">
					<template slot-scope="scope">
						<el-image
							class="table-avatar"
							:src="scope.row.avatarUrl"
							:preview-src-list="[scope.row.avatarUrl]"
							fit="cover"/>
					</template>
				</el-table-column>

				<el-table-column prop="nickName" label="👤 昵称" width="150">
					<template slot-scope="scope">
						<span class="table-nickname">{{scope.row.nickName}}</span>
					</template>
				</el-table-column>

				<el-table-column prop="wcMiniId" label="📱 小程序ID" show-overflow-tooltip>
				</el-table-column>

				<el-table-column prop="vipTime" label="💎 会员时间" width="200" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.vipTime" class="vip-badge">{{scope.row.vipTime}}</span>
						<span v-else class="normal-badge">普通用户</span>
					</template>
				</el-table-column>

				<el-table-column prop="createdAt" label="📅 创建日期" width="180" align="center">
					<template slot-scope="scope">
						<span class="date-text">{{scope.row.createdAt}}</span>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页器 -->
			<view class="tech-pagination">
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page="params.pageNum"
					:page-sizes="[20, 40, 60, 80, 100]"
					:page-count="maxPage"
					layout="total, sizes, prev, pager, next, jumper"
					:total="maxCount"
					background>
				</el-pagination>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	export default {
		data() {
			return {
				dataList: [],
				params: {
					searchText: '',
					pageSize: 20,
					pageNum: 1
				},
				maxPage: 1,
				maxCount: 1,
			}
		},

		onLoad() {
			that = this
			that.getDataList()
		},

		methods: {
			search(value) {
				that.dataList = []
				that.params.pageNum = 1
				that.getDataList()
			},

			handleCurrentChange(value) {
				that.params.pageNum = value
				that.getDataList()
			},

			getDataList() {
				that.common.rightApi("admin/user/list", that.params).then(res => {
					that.dataList = res.data
					that.maxPage = res.maxPage
					that.maxCount = res.maxCount
				})
			}
		},

	}
</script>

<style scoped>
/* ==================== 全局容器 ==================== */
.tech-container {
	position: relative;
	height: 100vh;
	width: 100%;
	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1419 100%);
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
}

/* 背景动态粒子效果 */
.bg-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(120, 119, 255, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 40% 20%, rgba(255, 71, 179, 0.02) 0%, transparent 50%);
	animation: particlesMove 20s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes particlesMove {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(30px, -30px); }
}

/* ==================== 顶部工具栏 ==================== */
.tech-toolbar {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 25px;
	margin-bottom: 20px;
	background: rgba(15, 20, 40, 0.6);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 16px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 20px rgba(0, 212, 255, 0.1);
	z-index: 1;
	animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.toolbar-left {
	display: flex;
	align-items: center;
	gap: 15px;
}

.toolbar-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.page-title {
	font-size: 24px;
	font-weight: 700;
	background: linear-gradient(135deg, #00d4ff 0%, #7877ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

/* ==================== 输入框样式 ==================== */
.tech-input {
	width: 350px;
}

.tech-input >>> .el-input__inner {
	background: rgba(15, 20, 40, 0.6) !important;
	border: 1px solid rgba(0, 212, 255, 0.3) !important;
	color: #fff !important;
	border-radius: 8px;
	padding-left: 40px;
	transition: all 0.3s ease;
}

.tech-input >>> .el-input__inner:focus {
	border-color: #00d4ff !important;
	box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
	background: rgba(15, 20, 40, 0.8) !important;
}

.tech-input >>> .el-input__inner::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.tech-input >>> .el-input__prefix {
	color: #00d4ff;
}

/* ==================== 表格容器 ==================== */
.tech-table-container {
	position: relative;
	height: calc(100vh - 160px);
	background: rgba(15, 20, 40, 0.4);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 212, 255, 0.2);
	border-radius: 16px;
	padding: 20px;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 0 30px rgba(0, 212, 255, 0.05);
	z-index: 1;
	animation: fadeInUp 0.6s ease-out 0.2s both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==================== 表格样式 ==================== */
.tech-table {
	border-radius: 12px;
	overflow: hidden;
}

.tech-table >>> .el-table {
	background: transparent !important;
	color: #fff !important;
}

.tech-table >>> .el-table th {
	background: rgba(0, 212, 255, 0.1) !important;
	color: #00d4ff !important;
	font-weight: bold;
	border-color: rgba(0, 212, 255, 0.2) !important;
	text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.tech-table >>> .el-table td {
	background: rgba(15, 20, 40, 0.3) !important;
	border-color: rgba(0, 212, 255, 0.1) !important;
	color: rgba(255, 255, 255, 0.9) !important;
}

.tech-table >>> .el-table__row:hover > td {
	background: rgba(0, 212, 255, 0.15) !important;
	transition: all 0.3s ease;
}

.tech-table >>> .el-table--striped .el-table__body tr.el-table__row--striped td {
	background: rgba(15, 20, 40, 0.5) !important;
}

.tech-table >>> .el-table__body tr:hover {
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

/* 表格内容样式 */
.table-nickname {
	color: #00d4ff;
	font-weight: 500;
}

.table-avatar {
	width: 60px !important;
	height: 60px !important;
	border-radius: 50%;
	border: 2px solid rgba(0, 212, 255, 0.3);
	transition: all 0.3s ease;
	cursor: pointer;
}

.table-avatar:hover {
	transform: scale(1.15);
	border-color: #00d4ff;
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
}

/* 会员徽章 */
.vip-badge {
	display: inline-block;
	padding: 6px 16px;
	background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
	color: #1a1f3a;
	border-radius: 12px;
	font-weight: 700;
	font-size: 13px;
	box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
	animation: vipGlow 2s ease-in-out infinite;
}

@keyframes vipGlow {
	0%, 100% {
		box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
	}
	50% {
		box-shadow: 0 2px 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.3);
	}
}

.normal-badge {
	display: inline-block;
	padding: 6px 16px;
	background: rgba(120, 119, 255, 0.2);
	color: #7877ff;
	border-radius: 12px;
	font-weight: 600;
	font-size: 13px;
	border: 1px solid rgba(120, 119, 255, 0.3);
}

/* 日期文本 */
.date-text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
}

/* ==================== 分页器容器样式 ==================== */
.tech-pagination {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 20px 0 0;
	margin-top: 20px;
	border-top: 1px solid rgba(0, 212, 255, 0.1);
}

/* ==================== 滚动条样式 ==================== */
.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(15, 20, 40, 0.3);
	border-radius: 4px;
}

.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: linear-gradient(135deg, #00d4ff 0%, #0084ff 100%);
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.tech-table-container >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(135deg, #00e4ff 0%, #0094ff 100%);
}

/* ==================== 响应式优化 ==================== */
@media (max-width: 1200px) {
	.tech-toolbar {
		flex-direction: column;
		gap: 15px;
	}

	.toolbar-left,
	.toolbar-right {
		width: 100%;
		justify-content: center;
	}

	.tech-input {
		width: 100%;
		max-width: 400px;
	}
}
</style>
